<template>
  <Modal v-model:visible="isShow" :title="title" :showClose="true" @close="">
    <div class="popup_body">
      <div class="game_container">
        <div class="game_item" v-for="(game, index) in gameList" :key="index" @click="handleGameClick(game)">
          <ImgT class="game_icon" :key="game.game_icon" :src="joinURL(settings.backend_upload, `${game.game_icon}.webp`)"
            alt="" />
          <div class="game_title">{{ gameClubIds[game.game_type] }}</div>
        </div>
      </div>
    </div>
  </Modal>

</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue';
import { joinURL } from '@/utils/publicMethods'

import PKwebsocket from "@/lolo/Ws";
import { NetPacket } from "@/netBase/NetPacket";

import { useI18n } from 'vue-i18n';
const { t } = useI18n();

import pinia from "@/store/index";
import { storeToRefs } from "pinia";
import { Page } from "@/store/page";
const { settings } = storeToRefs(Page(pinia));

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  close: {
    type: Function,
    required: true,
  },
});

const gameClubIds: any = ref({
  49: t('club_page_49'),
  47: t('club_page_47'),
})

const gameList = ref<any[]>([]);

const emit = defineEmits(['update:visible', 'close']);

const title = ref(t('club_page_ksks'));

const isShow = computed({
  get: function () {
    getQuickList()
    return props.visible;
  },
  set: function (value: any) {
    emit('update:visible', value);
    emit('close');
  },
});


// 获取快速开始游戏列表
const getQuickList = () => {
  const req = NetPacket.req_quick_start_game();
  PKwebsocket.instance.send(req, true, {
    callbackName: "msg_notify_quick_start_game",
    callback: getQuickStartHandle,
  });
}
const getQuickStartHandle = (res: any) => {
  console.log('快速游戏列表', res)
  gameList.value = res.official_game_list
}


const handleGameClick = (game: any) => {
  console.log('游戏被点击', game);
};

onMounted(async () => {
  await getQuickList()
});
</script>

<style scoped>
.popup_body {
  padding: 20px;

  .game_container {
    display: flex;
    flex-wrap: wrap;
    height: 290px;
    overflow: auto;

    .game_item {
      width: 100px;
      text-align: center;
      margin: 10px 0;

      .game_icon {
        width: 50px;
        height: 50px;
      }

      .game_title {
        font-size: 14px;
        margin-top: 10px;
        color: #FFF;
        font-weight: 400;
      }
    }
  }
}
</style>
